<template>
  <a-layout class="layout">
    
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">{{ collapsed ? "Liux" : "Liux专用系统" }}</div>
      <a-menu theme="dark" mode="inline" :defaultOpenKeys="OpenKeys" :default-selected-keys="SelectKeys">
        <a-menu-item key="/">
          <router-link to="/" tag="div">
            <a-icon type="user" />
            <span>数据驾驶舱</span>
          </router-link>
        </a-menu-item>
       <a-sub-menu key="员工管理" >
        <span slot="title"><a-icon type="appstore" /><span>员工管理</span></span>
        <a-menu-item key="/userlist">
          
            <router-link to="/userlist" tag="div">员工列表</router-link>
          
        </a-menu-item>
      </a-sub-menu>
       <a-sub-menu key="业务管理" >
        <span slot="title"><a-icon type="appstore" /><span>业务管理</span></span>
        <a-menu-item key="/orderlist">
         <router-link to="/orderlist" tag="div">工单管理</router-link>
        </a-menu-item>
      </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="flex j-s" style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        <!-- 下拉菜单 -->
        <a-dropdown style="margin-right:30px">
          <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
          欢迎！ Liux <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;"><a-icon type="lock" />修改密码</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="login"  href="javascript:;"><a-icon type="team" />退出登录</a>
            </a-menu-item>
           
          </a-menu>
        </a-dropdown>
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
        }"
      >
        <Brand></Brand>
        <router-view/>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>

import Brand from '../components/Brand.vue';

export default {
    components:{
        Brand

    },
    data() {
        return {
        collapsed: false,
        SelectKeys:[],
        OpenKeys:[]
        };
    },
    created(){
        if(this.$route.meta && this.$route.meta.module){
            this.SelectKeys = [this.$route.path]
            this.OpenKeys=[this.$route.meta.module]
        }
        this.SelectKeys = [this.$route.path]

        
    },
  methods:{
      login(){
          this.$router.push('/login')
      }
  }
};
</script>
<style lang='scss'>
.layout {
  height: 100vh;
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
    .trigger:hover {
      color: #1890ff;
    }
  }
}
.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
  font-size: 14px;
  color: white;
  line-height: 32px;
  text-align: center;
  font-weight: bold;
  font-family: 楷体;
}
</style>

